//获取选择框
let box = document.getElementById('box');
//箭头
let arrow = document.getElementsByClassName('arrow')[0];
//获取显示选择结果的文本框
let text = document.getElementsByClassName('text');
//定义一个空字符串接收文本
let pro_text = '';
let city_text = '';
let area_text = '';
//获取每一个list
let list = document.getElementsByClassName('listing');
//获取省份、城市、区县按钮
let chosePCA = document.getElementsByClassName('chosePCA');
//省份的li标签
let provinceLi = document.getElementsByClassName('provinceLi');
let cityLi = document.getElementsByClassName('cityLi');
let areaLi = document.getElementsByClassName('areaLi');
//获取选的省份、市、区的索引
let provinceIndex = 0;
let cityIndex = 0;
//空字符串接收省市区的数据,用于动态加载
let str_province = '';
let str_city = '';
let str_area = '';
//获取确定后显示的文本框
let totalConfirm = document.getElementById('totalConfirm');
//最后需要显示的文本
let lastText = '';
//暂时保存最后文本
let tempProText = '';
let tempCityText = '';

//点击空白处，关闭选择界面
function close() {
    $(document).mouseup(function(e) {
        var con = $('#bigOne');
        if (!con.is(e.target) && con.has(e.target).length === 0) {
            content.style.display = 'none';
        }
    })
}

//box的点击事件，箭头更换，隐藏的盒子显示
function boxClick() {
    box.onclick = function() {
        //如果盒子隐藏，点击则显示
        if (content.offsetParent === null) {
            content.style.display = 'block';
            arrow.className = 'iconfont icon-arrow-up arrow';
            showPCAList();
            for (var i = 0; i < list.length; i++) {
                if (i === 0) {
                    list[i].style.display = 'block';
                    chosePCA[i].classList.add('select');
                } else {
                    list[i].style.display = 'none';
                    chosePCA[i].classList.remove('select');
                }
            }
            if (str_province === '') {
                addProvince();
            }
        }
        //如果盒子显示，点击则隐藏
        else {
            content.style.display = 'none';
            arrow.className = 'iconfont icon-arrow-down arrow';
        }
    }
}

//根据对应的chosePCA显示对应的板块
function showPCAList() {
    for (var i = 0; i < list.length; i++) {
        if (chosePCA[i].classList.contains('select')) {
            list[i].style.display = 'block';
        } else {
            list[i].style.display = 'none';
        }
    }
}

//省份、城市、区县点击事件
function chosePCAClick() {
    for (var i = 0; i < chosePCA.length; i++) {
        chosePCA[i].onclick = function() {
            for (var k = 0; k < chosePCA.length; k++) {
                chosePCA[k].className = 'chosePCA';
            }
            this.classList.add('select');
            showPCAList();
        }
    }
}

//点击省市区文本的时候，显示出对应的选择板块
function textClick() {
    for (var i = 1; i < 4; i++) {
        (function(i) {
            text[i].onclick = function(e) {
                content.style.display = 'block';
                for (var k = 0; k < 3; k++) {
                    chosePCA[k].className = 'chosePCA';
                    list[k].style.display = 'none';
                }
                list[i - 1].style.display = 'block';
                chosePCA[i - 1].classList.add('select');
                arrow.className = 'iconfont icon-arrow-up arrow';
                e.stopPropagation();
            }
        })(i)
    }
}

//点击省市区的时候，自动跳到下一个板块，点了省，跳到市···
function changeClass(n) {
    if (n === 0 || n === 1) {
        chosePCA[n].classList.remove('select');
        list[n].style.display = 'none';
        chosePCA[n + 1].classList.add('select');
        list[n + 1].style.display = 'block';
    } else {
        content.style.display = 'none';
        arrow.className = 'iconfont icon-arrow-down arrow';
    }
}

//li标签的点击事件，点击后将省市区显示到文本框内
function textShow() {
    //点省
    $(document).on("click", '.provinceLi', function() {
            //最后显示的文本获取数据
            lastText = '';
            lastText = this.innerText;
            tempProText = this.innerText;
            //最开始的请选择省/市/区，消失
            text[0].innerHTML = '';
            //重复点省的时候，清空市区的数据
            pro_text = '';
            city_text = '';
            area_text = '';
            text[2].innerHTML = '';
            text[3].innerHTML = '';
            pro_text = this.innerText;
            //省的数据显示到页面
            text[1].innerHTML = pro_text;
            //获取当前省的索引
            provinceIndex = this.value;
            //当前省添加选择样式
            for (var i = 0; i < provinceLi.length; i++) {
                if (i === this.value) {
                    this.style.backgroundColor = '#46a4ff';
                    this.style.color = '#fff';
                } else {
                    provinceLi[i].style.backgroundColor = '';
                    provinceLi[i].style.color = '';
                }
            }
            //根据省的索引添加市的数据
            addCity();
            //自动跳到市选择板块
            changeClass(0);
        })
        //点市
    $(document).on("click", '.cityLi', function() {
            //最后显示的文本获取数据
            lastText = tempProText;
            lastText += '/' + this.innerText;
            tempCityText = lastText;
            //最开始的请选择省/市/区，消失
            text[0].innerHTML = '';
            //重复点市的时候，清空区的数据
            city_text = '';
            area_text = '';
            text[3].innerHTML = '';
            city_text = '/' + this.innerText;
            //市的数据显示到页面
            text[2].innerHTML = city_text;
            //获取市的索引
            cityIndex = this.value;
            //当前市添加选择样式
            for (var i = 0; i < cityLi.length; i++) {
                if (i === this.value) {
                    this.style.backgroundColor = '#46a4ff';
                    this.style.color = '#fff';
                } else {
                    cityLi[i].style.backgroundColor = '';
                    cityLi[i].style.color = '';
                }
            }
            //根据市的索引，添加区的数据
            addArea();
            //自动跳到区选择板块
            changeClass(1);
        })
        //点区
    $(document).on("click", '.areaLi', function() {
        //最后显示的文本获取数据
        lastText = tempCityText
        lastText += '/' + this.innerText;
        //最开始的请选择省/市/区，消失
        text[0].innerHTML = '';
        //重复点区的时候，清空区的数据
        area_text = '';
        area_text = '/' + this.innerText;
        //区的数据显示到页面
        text[3].innerHTML = area_text;
        //当前区添加选择样式
        for (var i = 0; i < areaLi.length; i++) {
            if (i === this.value) {
                this.style.backgroundColor = '#46a4ff';
                this.style.color = '#fff';
            } else {
                areaLi[i].style.backgroundColor = '';
                areaLi[i].style.color = '';
            }
        }
        //选完后，自动关闭选择界面
        changeClass(2);
    })
}

//将省动态添加到省
function addProvince() {
    //文本置空，防止重选的时候数据重复
    list[0].innerHTML = '';
    str_province = '';
    //读取JSON文件，获取数据
    for (var i = 0; i < data.length; i++) {
        str_province += "<li class='provinceLi' value=" + i + '>' + data[i].name + "</li>";
    }
    list[0].innerHTML = str_province;
}

//动态添加市区
function addCity() {
    //文本置空，防止重选的时候数据重复
    list[1].innerHTML = '';
    str_city = '';
    list[2].innerHTML = '';
    str_area = '';
    //读取JSON文件，获取数据
    var city_data = data[provinceIndex].city;
    for (var i = 0; i < city_data.length; i++) {
        str_city += "<li class='cityLi' value=" + i + '>' + city_data[i].name + "</li>";
    }
    list[1].innerHTML = str_city;
}

//动态添加区县
function addArea() {
    //文本置空，防止重选的时候数据重复
    list[2].innerHTML = '';
    str_area = '';
    //读取JSON文件，获取数据
    var area_data = data[provinceIndex].city[cityIndex].area;
    for (var i = 0; i < area_data.length; i++) {
        str_area += "<li class='areaLi' value=" + i + '>' + area_data[i] + "</li>";
    }
    list[2].innerHTML = str_area;
}


window.onload = function() {
    boxClick();
    chosePCAClick();
    textShow();
    textClick();
    close();
}